<template>
    <div class="dashboard">

        <el-row :gutter="40">
            <el-col :span="12" :offset="3" style="margin-top: 20px;">
                <el-card :style="{
                    height: '300px',
                    overflowX: 'hidden',
                    overflowY: 'auto',
                  }">
                  <p style="margin-top: -10px">国内疫情数据统计(不含港澳台)</p>
                    <el-table :data="cityTable">
                        <el-table-column prop="td0" label="省市">
                        </el-table-column>
                        <el-table-column prop="td1" label="现有" >
                            <template slot-scope="scope">
                                <div style="color: #F56C6C">
                                  {{ scope.row.td1 }}
                                </div>
                              </template>
                        </el-table-column>
                        <el-table-column prop="td2" label="确诊" >
                            <template slot-scope="scope">
                                <div style="color: #F56C6C">
                                  {{ scope.row.td2 }}
                                </div>
                              </template>
                        </el-table-column>
                        <el-table-column prop="td3" label="新增" >
                            <template slot-scope="scope">
                                <div style="color: blueviolet">
                                  {{ scope.row.td3 }}
                                </div>
                              </template>
                        </el-table-column>
                        <el-table-column prop="td4" label="输入" >
                            <template slot-scope="scope">
                                <div style="color: #606266;">
                                  {{ scope.row.td4 }}
                                </div>
                              </template>
                        </el-table-column>
                        <el-table-column prop="td5" label="治愈" >
                            <template slot-scope="scope">
                                <div style="color: #67C23A;">
                                  {{ scope.row.td5 }}
                                </div>
                              </template>
                        </el-table-column>
                        <el-table-column prop="td6" label="死亡" >
                            <template slot-scope="scope">
                                <div style="color: #F56C6C;">
                                  {{ scope.row.td6 }}
                                </div>
                              </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>

            <el-col :span="8" style="margin-top: 20px">
                <div style="display: flex;">
                    <el-card :style="{
                        height: '300px',
                        overflowX: 'hidden',
                        overflowY: 'auto',
                      }"  style="width: 1000px;">
                      <p style="margin-top: -10px">国内疫情数据变化(不含港澳台)</p>
                     <el-card v-for="(item,index) in countList" :key="index">
                        <span style="color: #F56C6C;">{{item.total}}</span>
                        <p style="color: #000000;">{{item.title}}</p>
                        <span style="color: #67C23A;">{{item.yesterday}}</span>
                     </el-card>
                    </el-card>
                </div>
                
            </el-col>

            <el-col :span="12" :offset="3" style="margin-top: 20px;">
                <el-card>
                    <p style="margin-top: -10px">校内用户疫情数据</p>
                    <div style="display: flex">
                        <div ref="charts" style="width: 350px; height:  300px;">
                        </div>
                        <div ref="charts2" style="width: 350px; height: 300px">
                        </div>
                    </div>
                </el-card>
            </el-col>

            <el-col :span="8"   style="margin-top: 20px;">
                <el-card :style="{
                    height: '368px',
                    overflowX: 'hidden',
                    overflowY: 'auto',
                  }">
                  <p style="margin-top: -10px">国内疫情资讯信息(不含港澳台)</p>
              <ul>
                <li v-for="item in consultList.slice(0,5)">
                    {{item.content}}
                </li>
              </ul>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>
<script>
    import { getDataListAPI, getDataDetailListAPI } from '@/components/utils/api/data_api.js'

    export default {
        data() {
            return {
                countList:[],
                totalList: [],
                PositiveList: [],
                ContactList: [],
                SecondaryContactList: [],
                NegativeCount: [],
                cityTable:[],
                consultList:[],
                consultTitle:''

            }
        },
        mounted() {
            this.getContainer()
            this. getInfo()
        },

        methods: {

            // 获取疫情信息
            getInfo(){
                getDataDetailListAPI().then(res=>{
                    this.cityTable = res.data.cityDataTable.cityTableTd
                    this.countList = res.data.countList
                    this.consultList = res.data.consult.contents
                    this.consultTitle = res.data.consult.title
                    console.log(res)
                })
            },

            async getContainer() {
                await getDataListAPI({}).then(res => {
                    this.totalList = res.data.data.typeList
                    this.PositiveList = this.totalList[0]
                    this.ContactList = this.totalList[1]
                    this.SecondaryContactList = this.totalList[2]
                    this.NegativeCount = this.totalList[3]
                })

                // 折线图
                var myChart = this.$echarts.init(this.$refs.charts);
                myChart.setOption({
                    xAxis: {
                        type: 'category',
                        data: ['阳性', '密接', '次密接', '阴性']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [this.PositiveList.typePositiveCount,
                            this.ContactList.typeContactCount,
                            this.SecondaryContactList.typeSecondaryContactCount,
                            this.NegativeCount.typeNegativeCount],
                            type: 'line'
                        }

                    ]
                });

                //饼图
                var myChart2 = this.$echarts.init(this.$refs.charts2);
                myChart2.setOption({
                    series: [
                        {
                            type: 'pie',
                            data: [
                                {
                                    value: this.PositiveList.typePositiveCount,
                                    name: '阳性'
                                },
                                {
                                    value: this.ContactList.typeContactCount,
                                    name: '密接'
                                },
                                {
                                    value: this.SecondaryContactList.typeSecondaryContactCount,
                                    name: '次密接'
                                },
                                {
                                    value: this.NegativeCount.typeNegativeCount,
                                    name: '阴性'
                                }
                            ],
                            radius: '50%'
                        }
                    ]
                })

            }
        }
    }
</script>
<style>
</style>